<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('在制品工段片数统计图')" />
</head>
<body class="gray-bg">
     <div class="container-div">
        <div class="row">
            <div class="col-sm-12 search-collapse">
                <form id="formId">
                    <div class="select-list">
                        <ul>
                            <li>
                                <label>统计时间：</label>
                                <select name="wipStageQtyStaDate" th:with="si=${timeflaglist}">
                                    <option th:each="dict : ${si}" th:text="${dict.shiftStr}" th:value="${dict.shiftCode}"></option>
                                </select>
                            </li>
                            <li>
                                <a class="btn btn-primary btn-rounded btn-sm" onclick="searchchart()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            </li>
                        </ul>
                    </div>
                </form>
            </div>
            
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>在制品工段片数统计柱状图(SIC)</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-bar-chart" style="height: 600px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: echarts-js" />
    <script th:inline="javascript">
        var prefix = ctx + "report/wipstageqtysta";

        const colors = [
            '#059aff',
            '#93CE07',
            '#AA069F',
            '#FC7D02',
            '#FBDB0F',
            '#AC3B2A'
        ];
        
        var stageIds = [[${stageIds}]];
        var qtys = [[${qtys}]];
        var barChart = null;
        var baroption = null;

        $(function() {
            // 初始化
            barChart = echarts.init(document.getElementById("echarts-bar-chart"));
        });

        function setchartOptions(stageIds, qtys) {
            baroption = {
                title : {
                    text: ''
                },
                tooltip : {
                    trigger: 'axis'
                },
                legend: {
                    data: ['片数']
                },
                grid:{
                    // x: 90, //x轴距离画板下边距
                    // y: 60  //y轴距离画板左边距
                    left: '10%',
                    bottom:'35%'
                },
                calculable : true,
                toolbox: {
                    feature: {
                        saveAsImage: {}   //下载为图片
                    }
                },
                xAxis : [
                    {
                        name: "工段名",
                        type : 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            // rotate: 90,
                            formatter: function(value) {
                                return value.split("").join("\n");
                            }
                        },
                        data : stageIds
                    }
                ],
                yAxis : [
                    {
                        name: "片数/片",
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name: '片数',
                        type: 'bar',
                        data: qtys,
                        // markPoint : {
                        //     data : [
                        //         {type : 'max', name: '最大值'}
                        //     ]
                        // },
                        itemStyle: {
                            color: colors[0]
                        },
                        label: {
                            show: true,
                            position: 'top',
                            formatter: function(data) {
                                if (data.value != null && data.value > 0) {
                                    return data.value;
                                } else {
                                    return '';
                                }
                            }
                        }
                    }
                ]
            };
        }

        function searchchart() {
            // 获取选择的日期时间
            var wipStageQtyStaDate = $('select[name="wipStageQtyStaDate"]').val();
            // 查询相应的日期时间班次的片数产能信息
            var url = prefix + "/getSicWipStageQtyChart";
            var data = { "wipStageQtyStaDate": wipStageQtyStaDate };
            var ajaxconfig = {
                url: url,
                type: "post",
                dataType: "json",
                data: data,
                beforeSend: function () {
                    $.modal.loading("正在处理中，请稍候...");
                },
                error : function(request) {
                    $.modal.alertError("系统错误！");
                },
                success: function(result) {
                    if (null === result) {
                        return;
                    }
                    if (result.code === web_status.SUCCESS) {
                        if (null == result.data) {
                            return;
                        }
                        let data = result.data;
                        setChartParam(data.stageIds, data.qtys);
                    } else if (result.code === web_status.WARNING) {
                        $.modal.alertWarning(result.msg)
                    } else {
                        $.modal.alertError(result.msg);
                    }
                },
                complete: function () {
                    $.modal.closeLoading();
                }
            };
            $.ajax(ajaxconfig);
        }

        // 设置图表的参数
        function setChartParam(stageIds, qtys) {
            setchartOptions(stageIds, qtys);
            barChart.setOption(baroption);
            window.onresize = barChart.resize;
            // $(window).resize(barChart.resize);
        }
    </script>
</body>
</html>